<template>
    <div class="common-layout">
        <el-scrollbar v-loading="loading" height="94vh">
            <el-row style="padding: 10px; background: linear-gradient(89deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                <el-col :span="4">
                    <span style="font-size: 20px; font-weight: 1000; color: white">
                        <el-icon><UserFilled /></el-icon>{{ $t('人员信息详情') }}
                    </span>
                </el-col>
                <el-col :span="20">
                    <div style="float: right">
                        <el-button :icon="Back" round @click="$router.push('/baseinfo/empinfo')">{{ $t('返回') }}</el-button>
                        <el-button @click="onSubmit()" color="#2587eb" :icon="Check" round>{{ $t('保存') }}</el-button>
                        <el-button color="#00b794" :icon="Document" round @click="excelexport()">{{ $t('导出') }}</el-button>
                        <UiSet :type="2" :index="0" :Prop="uiSectionList" :comid="componentId" v-model:isgrant="isuigrant" @before-click="uisetbefore"></UiSet>
                    </div>
                </el-col>
            </el-row>
            <el-container>
                <el-container>
                    <el-container>
                        <el-dialog v-model="dialogVisible">
                            <el-image :src="dialogImageUrl" fit="fill" />
                        </el-dialog>
                        <el-aside width="300px">
                            <el-image style="width: 300px; height: 350px" :src="srcList.length>0?srcList[0]:null" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" fit="fill" />
                            <!-- prettier-ignore -->
                            <el-upload :limit="3" 
                                v-model:file-list="fileList" 
                                :http-request="handleUpload" 
                                list-type="picture-card" 
                                :on-exceed="handleExceed"   
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <el-icon><Plus /></el-icon>
                            </el-upload>
                        </el-aside>
                        <el-main style="padding: 5px">
                            <el-form :model="usrinfo" label-width="180px">
                                <el-row :gutter="10">
                                    <template v-for="(item, index) in Stores.comui[componentId][0].baseProps" :key="index">
                                        <el-col v-if="index < 18 && item.visible" :xs="item.type == 'memo' || item.type == 'title' ? 24 : 24" :sm="item.type == 'memo' || item.type == 'title' ? 24 : 12" :md="item.type == 'memo' || item.type == 'title' ? 24 : 12" :lg="item.type == 'memo' || item.type == 'title' ? 24 : 8" :xl="item.type == 'memo' || item.type == 'title' ? 24 : 6" style="background: #d1d1d1">
                                            <el-form-item style="background: rgb(189 189 189)">
                                                <template #label>
                                                    <template v-if="item.type == 'title'">
                                                        <span style="font-size: 20px; font-weight: 500; width: 100%; text-align: center; background: #6a6c70; color: white">
                                                            {{ I(item.label, item.labeleng) }}
                                                        </span>
                                                    </template>
                                                    <template v-else>
                                                        <span style="color: black">
                                                            {{ I(item.label, item.labeleng) }}
                                                        </span>
                                                    </template>
                                                </template>
                                                <template #default>
                                                    <template v-if="item.type == 'title'"> </template>
                                                    <template v-else-if="item.type == 'memo'">
                                                        <el-input type="textarea" v-model="usrinfo[item.prop]" />
                                                    </template>
                                                    <template v-else-if="item.type == 'date'">
                                                        <el-date-picker v-model="usrinfo[item.prop]" type="date" placeholder=""></el-date-picker>
                                                    </template>
                                                    <div v-else-if="item.type === 'number'">
                                                        <el-input-number v-model="usrinfo[item.prop]" :controls="false"></el-input-number>
                                                    </div>
                                                    <div v-else-if="item.type === 'checkbox'">
                                                        <el-checkbox v-model="usrinfo[item.prop]" :true-value="1" />
                                                    </div>
                                                    <template v-else-if="item.prop == 'dept'">
                                                        <deptmodel v-model:name="usrinfo.deptnm" v-model:id="usrinfo.deptid" :isreadonly="true"></deptmodel>
                                                    </template>
                                                    <template v-else>
                                                        <el-input :readonly="item.readonly" v-model="usrinfo[item.prop]" />
                                                    </template>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                    </template>
                                </el-row>
                            </el-form>
                        </el-main>
                    </el-container>
                    <el-footer style="padding: 5px">
                        <el-form :model="usrinfo" label-width="180px">
                            <el-row :gutter="10">
                                <template v-for="(item, index) in Stores.comui[componentId][0].baseProps" :key="index">
                                    <el-col v-if="index >= 18 && item.visible" :xs="item.type == 'memo' || item.type == 'title' ? 24 : 24" :sm="item.type == 'memo' || item.type == 'title' ? 24 : 12" :md="item.type == 'memo' || item.type == 'title' ? 24 : 8" :lg="item.type == 'memo' || item.type == 'title' ? 24 : 8" :xl="item.type == 'memo' || item.type == 'title' ? 24 : 6" style="background: #d1d1d1">
                                        <el-form-item style="background: rgb(189 189 189)">
                                            <template #label>
                                                <template v-if="item.type == 'title'">
                                                    <span style="font-size: 20px; font-weight: 500; width: 100%; text-align: center; background: #6a6c70; color: white">
                                                        {{ I(item.label, item.labeleng) }}
                                                    </span>
                                                </template>
                                                <template v-else>
                                                    <span style="color: black">
                                                        {{ I(item.label, item.labeleng) }}
                                                    </span>
                                                </template>
                                            </template>
                                            <template #default>
                                                <template v-if="item.type == 'title'"> </template>
                                                <template v-else-if="item.type == 'memo'">
                                                    <el-input type="textarea" v-model="usrinfo[item.prop]" />
                                                </template>
                                                <template v-else-if="item.type == 'date'">
                                                    <el-date-picker v-model="usrinfo[item.prop]" type="date" placeholder=""></el-date-picker>
                                                </template>
                                                <div v-else-if="item.type === 'number'">
                                                    <el-input-number v-model="usrinfo[item.prop]" :controls="false"></el-input-number>
                                                </div>
                                                <div v-else-if="item.type === 'checkbox'">
                                                    <el-checkbox v-model="usrinfo[item.prop]" :true-value="1" />
                                                </div>
                                                <template v-else-if="item.prop == 'dept'">
                                                    <deptmodel v-model:name="usrinfo.deptnm" v-model:id="usrinfo.deptid" :isreadonly="true"></deptmodel>
                                                </template>
                                                <template v-else>
                                                    <el-input :readonly="item.readonly" v-model="usrinfo[item.prop]" />
                                                </template>
                                            </template>
                                        </el-form-item>
                                    </el-col>
                                </template>
                            </el-row>
                        </el-form>
                    </el-footer>
                </el-container>
            </el-container>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import { httpSend } from '@/utils/api';
import { getCurrentInstance, onMounted, onBeforeUnmount, ref, computed, watchEffect, nextTick, watch, reactive, onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
import { UserFilled } from '@element-plus/icons-vue';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { Iphone, Location, OfficeBuilding, Tickets, User } from '@element-plus/icons-vue';
import { Setting, Refresh, Search, Document, Plus, Check, Back } from '@element-plus/icons-vue';
//@ts-ignore
import { TableUiSection } from '@/components/share/ui-set.interface.ts';
//@ts-ignore
import { formatDate, chkgrant } from '@/globalmethods';
import deptmodel from '@/components/share/deptmodel.vue';
//@ts-ignore
import { useshareStore } from '@/store';
import UiSet from '@/components/share/UiSet.vue';
const Stores = useshareStore() as any;
const isuigrant = ref(false);
const route = useRoute();
const router = useRouter();
//const empId = router.query;
const empId = ref(null);
const baseid = ref(null);
// 自定义字段配置
const componentId = 'empinfodetailsetting';
const uiSectionList: TableUiSection[] = [
    {
        baseProps: [
            { label: '人员信息', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '姓名', prop: 'name', visible: true, readonly: false, type: 'string' },
            { label: '英文名', prop: 'englishname', visible: true, readonly: false, type: 'string' },
            { label: '性别', prop: 'sex', visible: true, readonly: false, type: 'string' },
            { label: '身份证号', prop: 'idcard', visible: true, readonly: false, type: 'string' },
            { label: '身高', prop: 'height', visible: true, readonly: false, type: 'string' },
            { label: '体重', prop: 'weight', visible: true, readonly: false, type: 'string' },
            { label: '出生日期', prop: 'birthday', visible: true, readonly: false, type: 'date' },
            { label: '年龄', prop: 'age', visible: true, readonly: true, type: 'string' },
            { label: '民族', prop: 'Native', visible: true, readonly: false, type: 'string' },
            { label: '政治面貌', prop: 'Polity', visible: true, readonly: false, type: 'string' },
            { label: '银行卡号', prop: 'bank', visible: true, readonly: false, type: 'string' },
            { label: '特长', prop: 'talent', visible: true, readonly: false, type: 'memo' },

            { label: '教育情况', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '学校', prop: 'school', visible: true, readonly: false, type: 'string' },
            { label: '学历', prop: 'education', visible: true, readonly: false, type: 'string' },
            { label: '毕业日期', prop: 'graduationtime', visible: true, readonly: false, type: 'date' },
            { label: '学校地址', prop: 'schoolarea', visible: true, readonly: false, type: 'memo' },

            { label: '联系方式', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '联系电话', prop: 'tel', visible: true, readonly: false, type: 'string' },
            { label: '联系邮箱', prop: 'email', visible: true, readonly: false, type: 'string' },
            { label: '联系微信号', prop: 'wechat', visible: true, readonly: false, type: 'string' },
            { label: '联系QQ号', prop: 'qq', visible: true, readonly: false, type: 'string' },
            { label: '联系邮编', prop: 'zipcode', visible: true, readonly: false, type: 'string' },
            { label: '紧急联系人', prop: 'emergencycontact', visible: true, readonly: false, type: 'string' },
            { label: '紧急电话', prop: 'emergencytel', visible: true, readonly: false, type: 'string' },
            { label: '紧急联系地址', prop: 'emergencyaddress', visible: true, readonly: false, type: 'memo' },
            { label: '贯籍', prop: 'birthplace', visible: true, readonly: false, type: 'memo' },
            { label: '当前居住地址', prop: 'residence', visible: true, readonly: false, type: 'memo' },
            { label: '员工描述', prop: 'mandes', visible: true, readonly: false, type: 'memo' },

            { label: '工作信息', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '员工编号', prop: 'employeeid', visible: true, readonly: false, type: 'string' },
            { label: '员工编号1', prop: 'employeeid1', visible: true, readonly: false, type: 'string' },
            { label: '部门', prop: 'dept', visible: true, readonly: false, type: 'string' },
            { label: '员工卡号', prop: 'idcardnumber', visible: true, readonly: false, type: 'string' },
            { label: '员工状态', prop: 'state', visible: true, readonly: false, type: 'string' },
            { label: '职务', prop: 'position', visible: true, readonly: false, type: 'string' },
            { label: '工种', prop: 'worktype', visible: true, readonly: false, type: 'string' },
            { label: '工位号', prop: 'worknum', visible: true, readonly: false, type: 'string' },
            { label: '员工效率', prop: 'efficiency', visible: true, readonly: false, type: 'string' },
            { label: '派驻单位', prop: 'residentunit', visible: true, readonly: false, type: 'string' },
            { label: '是否需要考勤', prop: 'ishrchk', visible: true, readonly: false, type: 'checkbox' },
            { label: '工作组', prop: 'team', visible: true, readonly: false, type: 'string' },
            { label: '技能', prop: 'skill', visible: true, readonly: false, type: 'string' },
            { label: '是否新来', prop: 'isnew', visible: true, readonly: false, type: 'checkbox' },
            { label: '计薪方式', prop: 'salarytype', visible: true, readonly: false, type: 'string' },
            { label: '基本工资', prop: 'basesalary', visible: true, readonly: false, type: 'string' },
            { label: '合同开始', prop: 'contractdatebe', visible: true, readonly: false, type: 'date' },
            { label: '合同结束', prop: 'contractdateend', visible: true, readonly: false, type: 'date' },
            { label: '注册日期', prop: 'registerdate', visible: true, readonly: false, type: 'date' },
            { label: '注册地址', prop: 'registerplace', visible: true, readonly: false, type: 'memo' },
            { label: '入职日期', prop: 'enterdate', visible: true, readonly: false, type: 'date' },
            { label: '转正日期', prop: 'comfirmdate', visible: true, readonly: false, type: 'date' },
            { label: '离职日期', prop: 'leafdate', visible: true, readonly: false, type: 'date' },
            { label: '离职原因', prop: 'leafreason', visible: true, readonly: false, type: 'string' },
            { label: '离职备注', prop: 'leafdes', visible: true, readonly: false, type: 'memo' },
            { label: '档案存放点', prop: 'documentplace', visible: true, readonly: false, type: 'memo' },
            { label: '是否培训', prop: 'istraining', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否上岗考试', prop: 'isexam', visible: true, readonly: false, type: 'checkbox' },
            { label: '考试分数', prop: 'examscores', visible: true, readonly: false, type: 'string' },

            { label: '担保/介绍人', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '介绍人', prop: 'referrer', visible: true, readonly: false, type: 'string' },
            { label: '介绍人电话', prop: 'referrertel', visible: true, readonly: false, type: 'string' },
            { label: '介绍人地址', prop: 'referreraddress', visible: true, readonly: false, type: 'memo' },
            { label: '介绍人工作单位', prop: 'referrerunit', visible: true, readonly: false, type: 'memo' },
            { label: '担保人', prop: 'guarantor', visible: true, readonly: false, type: 'string' },
            { label: '担保人电话', prop: 'guarantortel', visible: true, readonly: false, type: 'string' },
            { label: '担保人地址', prop: 'guarantoraddress', visible: true, readonly: false, type: 'memo' },
            { label: '担保人工作单位', prop: 'guarantorunit', visible: true, readonly: false, type: 'memo' },

            { label: '社保情况', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '是否停止社保', prop: 'stopinsurance', visible: true, readonly: false, type: 'checkbox' },
            { label: '保险账号', prop: 'insurancenum1', visible: true, readonly: false, type: 'string' },
            { label: '住房公积金号', prop: 'insurancenum2', visible: true, readonly: false, type: 'string' },
            { label: '保险号', prop: 'insurancenum3', visible: true, readonly: false, type: 'string' },
            { label: '开始日期', prop: 'insurancebe', visible: true, readonly: false, type: 'date' },
            { label: '结束日期', prop: 'insuranceend', visible: true, readonly: false, type: 'date' },
            { label: '月交费额', prop: 'monthinsurance', visible: true, readonly: false, type: 'string' },
            { label: '总交费额', prop: 'allinsurance', visible: true, readonly: false, type: 'string' },
            { label: '是否交养老保险', prop: 'isinsurance1', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交失业保险', prop: 'isinsurance2', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交医疗保险', prop: 'isinsurance3', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交工伤保险', prop: 'isinsurance4', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交生育保险', prop: 'isinsurance5', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交其它保险6', prop: 'isinsurance6', visible: true, readonly: false, type: 'checkbox' },
            { label: '是否交其它保险7', prop: 'isinsurance7', visible: true, readonly: false, type: 'checkbox' },

            { label: '其它信息', prop: '', visible: true, readonly: false, type: 'title' },
            { label: '简历', prop: 'resume', visible: true, readonly: false, type: 'memo' },
            { label: '奖惩记录', prop: 'manrecord', visible: true, readonly: false, type: 'memo' },
            { label: '家庭情况', prop: 'homedes', visible: true, readonly: false, type: 'memo' },
            { label: '签合同情况', prop: 'contractdes', visible: true, readonly: false, type: 'memo' },
            { label: '担保情况', prop: 'guaranteedes', visible: true, readonly: false, type: 'memo' },
        ],
        tableProps: [],
    },
];
Stores.setcomui([componentId, uiSectionList]);

// 获取当前组件实例
const { appContext } = getCurrentInstance();
const { t } = useI18n();
const ElMessage = appContext.config.globalProperties.$ElMessage;

const usrinfo: any = reactive({});
const loading = ref(false);
const srcList = ref([]);
const fileList = ref<UploadUserFile[]>([]);
const Getempdetail = async () => {
    baseid.value = empId.value;
    loading.value = true;
    srcList.value = [];
    fileList.value = [];
    const fd = new FormData();
    fd.append('param', JSON.stringify({ id: empId.value }));
    const res = await httpSend('getemployeedetail', fd);
    if (res && res.data) {
        Object.assign(usrinfo, res.data[0]);
        usrinfo.delpicture = [];
        if (res.data[0].picturepath && res.data[0].picturepath.length > 0) {
            res.data[0].picturepath.forEach((v) => {
                fileList.value.push({ url: v });
                srcList.value.push(v);
            });
        }
        loading.value = false;
        setTimeout(() => {
            modifiedData.value = {};
        }, 40);
    }
};
//清空reactive对象数据
const clearReactiveObj = (obj) => {
    // 遍历对象的自有属性
    for (let key in obj) {
        if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
            // 如果是嵌套的对象，则递归调用
            clearReactiveObj(obj[key]);
        } else {
            // 否则设置为null或者适当的默认值
            obj[key] = null;
        }
    }
};
onActivated(() => {
    if (route.query && route.query.empId) {
        if (!empId.value || (empId.value && empId.value != route.query.empId)) {
            empId.value = route.query.empId;
            Getempdetail();
        }
    } else {
        clearReactiveObj(usrinfo);
        setTimeout(() => {
            modifiedData.value = {};
        }, 40);
    }
});

// Created钩子
onMounted(() => {
    isuigrant.value = chkgrant('人事档案详情', 'customset');
    getuiset();
});
//获取配置数据
const getuiset = async () => {
    loading.value = true;
    let comdata = [];
    comdata[0] = componentId;
    comdata[1] = [];
    Object.assign(comdata[1], uiSectionList);
    const fd = new FormData();
    let data = { comid: componentId, userid: null };
    fd.append('param', JSON.stringify(data));
    const res = await httpSend('getComUiSet', fd, false);
    if (res && res.code == 1) {
        if (res.data.length > 0) {
            let data = JSON.parse(res.data[0]['setjson']);
            // 如果数据依然是字符串，则需要再解析一次
            if (typeof data === 'string') {
                data = JSON.parse(data); // 第二次解析
            }
            if (data) {
                Object.assign(comdata[1], data);
            }
        }
    }
    loading.value = false;
    Stores.setcomui(comdata);
};

// 路由离开前执行的钩子
onBeforeRouteLeave((to, from, next) => {
    if (modifiedData.value) {
        let ismodify: boolean = false;
        let data = { ...modifiedData.value };
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                ismodify = true;
                break;
            }
        }
        if (ismodify) {
            Stores.setischange(true);
        }
    }
    next();
});

const onBack = () => {
    router.push({ name: '人事档案' });
};
//日期字段
const datefield = ['birthday', 'registerdate', 'enterdate', 'confirmdate', 'leavedate', 'graduationtime', 'contractdatebe', 'contractdateend', 'comfirmdate', 'leafdate', 'insuranceend', 'insurancebe'];
const boolfield = ['isvirtualemp', 'ishrchk', 'isnew', 'istraining', 'isexam', 'stopinsurance', 'isinsurance1', 'isinsurance2', 'isinsurance3', 'isinsurance4', 'isinsurance5', 'isinsurance6', 'isinsurance7'];
const modifiedData = ref({});
// 深度监听 usrinfo 的变化
watch(
    () => ({ ...usrinfo }),
    (newVal, oldVal) => {
        // 计算差异并将更改存储到 changes 对象中
        Object.keys(newVal).forEach((key) => {
            if (JSON.stringify(newVal[key]) !== JSON.stringify(oldVal[key])) {
                modifiedData.value[key] = newVal[key];
            }
        });
    },
    { deep: true }
);

//保存数据
const onSubmit = async () => {
    if (!chkgrant('人事档案详情', 'saveemployee')) {
        ElMessage.warning(t('您暂无保存权限,请联系管理员!'));
        return;
    }
    const fd = new FormData();
    let data = { ...modifiedData.value };
    let ismodify: boolean = false;
    for (let key in data) {
        // 确保是对象自身的属性，而不是继承的属性
        if (data.hasOwnProperty(key)) {
            ismodify = true;
            if (datefield.includes(key)) {
                data[key] = formatDate(data[key]);
            }
            if (boolfield.includes(key)) {
                data[key] = data[key] ? 1 : 0;
            }
        }
    }
    if (!ismodify) {
        ElMessage.warning(t('数据没有修改过,无需保存'));
        return;
    }
    loading.value = true;
    data['id'] = usrinfo['id'];
    fd.append('param', JSON.stringify(data));
    const res = await httpSend('saveemployee', fd);
    if (res.code == 1) {
        //usrinfo.value = res.nowdata[0];
        Object.assign(usrinfo, res.nowdata[0]);
        empId.value = res.nowdata.id;
        srcList.value = [];
        fileList.value = [];
        usrinfo.delpicture = [];
        if (res.nowdata[0].picturepath && res.nowdata[0].picturepath.length > 0) {
            res.nowdata[0].picturepath.forEach((v) => {
                fileList.value.push({ url: v });
                srcList.value.push(v);
            });
        }
        setTimeout(() => {
            modifiedData.value = {};
        }, 50);
    }
    loading.value = false;
};
//导出
const excelexport = () => {
    if (!chkgrant('人事档案详情', 'excelout')) {
        ElMessage.warning(t('您暂无导出权限,请联系管理员!'));
        return;
    }
};
//附件上传
const upload = ref();
const handleUpload = async (params: any) => {
    let path = 'uploads/emp';
    const fd = new FormData();
    fd.append('file', params.file);
    fd.append('path', path);
    const res = await httpSend('uploadfile', fd);
    if (res && res.code == 1) {
        srcList.value.push(res.url);
        fileList.value[fileList.value.length - 1].url=res.url;
        usrinfo.picturepath.push(res.url);
        modifiedData.value['picturepath'] = usrinfo.picturepath;
    }
};
//文件上传数量控制
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(t('图片最多只能上传三张!'));
};
//文件移除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    srcList.value.splice(srcList.value.indexOf(uploadFile.url),1);
    usrinfo.delpicture.push(uploadFile.url);
    usrinfo.picturepath=srcList.value;
    modifiedData.value['delpicture'] = usrinfo.delpicture;
    modifiedData.value['picturepath'] = usrinfo.picturepath;
};
//图片预览组件
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
};

//自定义配置权限判断
const uisetbefore = () => {
    if (!isuigrant.value) {
        ElMessage.warning(t('您暂无配置权限,请联系管理员!'));
        return;
    }
};
//多语言翻译
const I = (label, labeleng) => {
    if (labeleng && localStorage.getItem('locale') == 'en') {
        return labeleng;
    }
    return t(label);
};
</script>

<style scoped>
:deep(.el-upload-list--picture-card) {
    --el-upload-list-picture-card-size: 40px !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 40px;
    align-items: center;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    height: var(--el-upload-picture-card-size);
    justify-content: center;
    vertical-align: top;
    width: var(--el-upload-picture-card-size);
}
</style>
